<template>
  <div class="header">
    <div class="header-top">
      <div :class="[item.key,'item',item.key == active_key && !close_panel_current?'current':'']"  v-for="item in tabs"  @click="changeTab(item.key,close_panel_current)">
        {{item.text}}
      </div>
    </div>
    <div class="panel"  :class="[!close_panel_current?'show':'']">
      <div class="panel-inner item">
        <template  v-for="item in tabs" >
          <ul :class="[item.key+'-panel',item.key == active_key && !close_panel_current?'current':'']" v-if="item.key=='cate'" >
            <li class="cate-item" v-for="item2 in filter_data.category_filter_list ">
              <p class="item-title">{{item2.name}}<span class="item-count">{{item2.quantity}}</span></p>
              <div class="item-content clearfix">
                <div  v-for="itemdata in item2.sub_category_list">
                  <div :class="['cate-box',itemdata.active ? 'cate-box-inner active' : 'cate-box-inner']" @click="changeItem(itemdata,'cate')">
                    {{itemdata.name}}({{itemdata.quantity}})
                  </div>
                </div>
              </div>
            </li>
          </ul>
          <ul :class="[item.key+'-panel',item.key == active_key && !close_panel_current?'current':'']"  v-if="item.key=='type'" >
            <li  :class="['type-item',item.active ? 'active':'']" v-for="item in filter_data.sort_type_list " @click="changeItem(item,'type')">
              {{item.name}}
            </li>
          </ul>
          <ul :class="[item.key+'-panel',item.key == active_key && !close_panel_current?'current':'']"  v-if="item.key=='filter'" >
            <li  class="filter-item" v-for="item in filter_data.activity_filter_list ">
              <p class="filter-title">{{item.group_title}}</p>
              <div class="item-content clearfix">
                <div class="cate-box" v-for="itemdata in item.items">
                  <div :class="['cate-box-inner',itemdata.active ? 'active':'',itemdata.icon ? 'has-icon':'']" @click="changeItem(itemdata,'filter')">
                    <img  v-if="itemdata.icon" :src="itemdata.icon">
                    {{itemdata.name}}
                  </div>
                </div>
              </div>
            </li>
          </ul>
        </template>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import  SearchBar from "@/components/common/SearchBar"
  export default {
    name: 'HomeHeader',
    computed: {
      ...mapState(['tabs','filter_data','close_panel_current','active_key'])
    },
    props:['title'],
    components:{

    },
    methods:{
      changeTab(key,close_panel_current){
        if(key==this.active_key){
          this.$store.dispatch('changeTab',[key,!close_panel_current])
          return
        }
        this.$store.dispatch('changeTab',[key,false])
      },
      changeItem(item,type){
        //alert(1)
        for(let i=0;i<this.filter_data.category_filter_list.length;i++){

          for(let j=0;j<this.filter_data.category_filter_list[i].sub_category_list.length;j++){
            this.filter_data.category_filter_list[i].sub_category_list[j].active=false;
          }
        }
        for(let i=0;i<this.filter_data.activity_filter_list.length;i++){

          for(let j=0;j<this.filter_data.activity_filter_list[i].items.length;j++){
            this.filter_data.activity_filter_list[i].items[j].active=false;
          }
        }
        for(let i=0;i<this.filter_data.sort_type_list.length;i++){
            this.filter_data.sort_type_list[i].active=false;
        }
        item.active=true;
        this.$forceUpdate()
        document.documentElement.scrollTop = document.body.scrollTop =0;
        this.$store.dispatch('cateQuery',[item.code,type,1,item.name])
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import '~@/assets/main.styl'
  .header {
    width: 100%;
    max-width:750px;
    margin-left:auto;
    margin-right:auto;
    background-color: #fff;
    margin-top: (1.28rem);
    .header-top {
      position: fixed;
      width: 100%;
      max-width:750px;
      margin-left:auto;
      margin-right:auto;
      display: flex;
      height: (0.8rem);

      align-items: center;
      border-bottom: 1px solid #e4e4e4;
      background-color: #fff;
      z-index: 4;
    }
    .item {
      font-size: (13px);
      color: #2f2f2f;
      border-right: 1px solid #ddd;
      flex: 1;
      text-align: center;
      position: relative;
      &:last-child {
        border: none;
      }
      &.cate:after, &.type:after {
        content: '';
        display: inline-block;
        width: (0.1rem);
        height: (0.1rem);
        margin-bottom: (0.04rem);
        margin-left: (0.12rem);
        border: 1px solid #666;
        border-width: 0 1px 1px 0;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -webkit-transition: .3s;
        transition: .3s;
      }
      &.filter:after {
        content: '';
        display: inline-block;
        width: (0.24rem);
        height: (0.24rem);
        transform: rotate(0);
        background-image: url('/app2/img/filter.png');
        background-size: cover;
      }
      &.current:not(.filter)::after {
        transform: rotate(225deg);
        -webkit-transform: rotate(225deg);
      }
      &:before {
        display: none;
        content: '';
        position: absolute;
        top: (0.46rem);
        left: 49%;
        width: (0.14rem);
        height: (0.14rem);
        background-color: #fff;
        border: 1px solid #e4e4e4;
        border-width: 0 1px 1px 0;
        transform: rotate(225deg);
        -webkit-transform: rotate(225deg);
      }
      &.cate:before {
        background-color: #efefef;
      }
      &.current:before {
        display: block;
      }


    }
    .panel {
      position: fixed;
      z-index: 1;
      left: 0;
      max-width:750px;
      margin-left:auto;
      margin-right:auto;
      top: (2.1rem);
      bottom: 0;
      right: 0;
      background-color: rgba(0,0,0,0.7);
      display: none;
      &.show {
        display: block;
      }
      .panel-inner {
        height: (6rem);
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling:touch;
        background-color: #fff;
        > ul {
          display: none;
          background-color: #fff;
          &.current {
            display: block;
          }
        }
      }
      .item-title {
        position: relative;
        font-size: (12px);
        height: (0.6rem);
        background-color: #efefef;
        line-height: (0.6rem);
        color: #666;
        padding-left:0.26rem
        &:before {
          content: '';
          position: absolute;
          display: block;
          margin-top: 0.16rem
          margin-left: -0.26rem
          width:0.04rem
          height: (0.32rem);
          background-color: #ffd161;
        }
      }
      .item-content {
        min-height:0.4rem;
      }
      .cate-box {
        float: left;
        width: 33.33%;
        font-size: (12px);
        box-sizing: border-box;
      }
      .cate-box-inner {
        text-align: center;
        border:1px solid #eee;
        color: #666;
        height: 0.84rem;
        line-height:0.84rem;
        position: relative;
        vertical-align middle;
        &.active {
          background-color: #fffbf1;
          color: #ffb000;
          border-color: #ffb000;
        }
      }
      .has-icon img {
        display: block;
        width: 0.36rem
        height:  0.36rem
        position: absolute;
        top:  0.2rem
        left: (0.2rem);
      }
      .type-item {
        border-bottom: 1px solid #e9e9e9;
        height: 0.88rem;
        font-size: (13px);
        color: #666;
        line-height:0.88rem;
        &.active {
          color: #ffb000;
        }
      }
      .filter-item {
        margin-bottom:0.2rem;
        margin-top: 0.1rem;
        padding-left: 0.1rem;
        padding-right: 0.1rem;
      }
      .filter-title {
        color: #999;
        font-size: (12px);
        padding-left:0.28rem;
        line-height:0.8rem
      }
    }
  }
</style>
